<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>库存调拨</title>
		<link rel="stylesheet" href="${ctx}/css/H-ui.min.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		<style type="text/css">
			.allocation{height: 700px;margin:20px auto;padding-left:0;padding-right: 0;}
		    .a_header{height: 50px;background: #f8f8f8;line-height: 50px;display: flex;border-bottom: 1px solid #eeeeee;}
		    .all{height: 500px;background: #FFFFFF;position: relative;}
		    .all_input{position:relative;height: 80px;border-bottom: 1px dashed #000000;display: flex;justify-content: space-around;}
		    .all_input input{border:0;border-bottom: 1px solid #cccccc;height: 20px;color: #CCCCCC;margin-top:25px} 
		    .a_select{width: 100px;height: 80px;border:1px solid red}
		    .ulhidden{width: 215px;height: 75px;border:2px solid red;position: absolute;top:52px;left: 186px;box-shadow:2px 3px 5px 5px #ccc;background: #FFFFFF;z-index: 2;}
		    .ulhidden li{height: 20px;line-height: 20px;}
		    .ulhidden li:hover{background: #0044CC;color: #FFFFFF;}
		    .ulhidden2{width: 215px;height: 75px;border:2px solid red;position: absolute;top:47px;left: 610px;box-shadow:2px 3px 5px 5px #ccc;background: #FFFFFF;z-index: 2;}
		    .all_input img{padding-top: 20px;padding-left: 10px;}
		    .ulhidden2 li{height: 20px;line-height: 20px;}
		    .ulhidden2 li:hover{background: #0044CC;color: #FFFFFF;}
		    .all_input2{display: flex;height: 80px;border-bottom: 1px dashed #000000;line-height: 80px;}
		    .all_input2 input{border:0;border-bottom: 1px solid #cccccc;height: 20px;color: #CCCCCC;}
		    .sequence{height: 80px;border-bottom: 1px solid #CCCCCC;line-height: 80px;}
		    .sequence ul{display: flex;justify-content: space-around;}
		    #AllocationBtn{width: 100px;height: 30px;text-align: center;line-height: 20px;color: #FFFFFF;background: #62affc;border-radius: 5px;margin-top: 50px;position: absolute;right: 0;cursor: pointer;}
            .a_header>a{font-size: 14px;margin-left: 15px;color: #62affc;}
		
		
		</style>
	</head>
	<body>
		<div class="container-fluid allocation">
			<div class="a_header">
				<a href="kucun_cangku.jsp">返回</a>
				<p style="text-indent: 35em;">新建调拨</p>
			</div>
			<div class="all">
				<div class="all_input">
					<p>
						<img src="${ctx}/imgs/kc_dc.png" alt="" /><input type="text" name="" id="showInput" value="" placeholder="调出仓库"/>
					</p>
				    <ul class="ulhidden" style="display: none;">
				    	<li>总部仓库</li>
				    	<li>销售二部仓库</li>
				    	<li>销售一部仓库</li>
				    </ul>
					<input type="text" name="" id="showInput2"  placeholder="调入仓库"/>
					<ul class="ulhidden2"  style="display: none;">
				    	<li>总部仓库</li>
				    	<li>销售二部仓库</li>
				    	<li>销售一部仓库</li>
				    </ul>
					<input type="text" name="" id="" value="备注"/>	
				</div>
				<div class="all_input">
					<p>
						<img src="${ctx}/imgs/kc_xz.png" alt="" /><input type="text" name="" id="showInput" value="" placeholder="输入或选择产品"/>
					</p>
					<input type="text" name="" placeholder="数量"/>
					<input type="text" name="" placeholder="搜索"/>
				</div>
				<div class="sequence">
					<ul>
						<li>序号</li>
						<li>品名</li>
						<li>款号</li>
						<li>颜色</li>
						<li>尺码</li>
						<li>调出仓库存数</li>
						<li>价格</li>
						<li>调拨数量</li>
						<li>金额</li>
					</ul>
				</div>
				<button id="AllocationBtn">创建调拨</button>
			</div>
		</div>
		<script>
		//点击出现选择框方法：
			$('#showInput').click(function(){
				var showDiv = $('.ulhidden').css('display');
				console.log(showDiv);
				if(showDiv == 'none'){
					$('.ulhidden').show();
					$('.ulhidden2').hide()
				}else{
					$('.ulhidden').hide();
				}
			})
			$('#showInput2').click(function(){
				var showDiv = $('.ulhidden2').css('display');
				console.log(showDiv);
				if(showDiv == 'none'){
					$('.ulhidden2').show();
					$('.ulhidden').hide()
				}else{
					$('.ulhidden2').hide();
				}
			})
			//获取.ulhidden li里面的文本平铺到id为#showInput文本框里面：
			$(function(){
				$('.ulhidden li').click(function(){
				   var code = $(this).html();
				   console.log(code)
				  $('#showInput').val(code);
				  $('.ulhidden').hide();
				})
			})
			//获取.ulhidden li里面的文本平铺到id为#showInput2文本框里面：
			$(function(){
				$('.ulhidden2 li').click(function(){
				   var code = $(this).html();
				   console.log(code)
				  $('#showInput2').val(code);
				  $('.ulhidden2').hide();
				})
			})
		</script>
	</body>
</html>
